<template>
	<view :class="['o-cell-item', Size, {'bb-so':Border}]" @click="onClick"
	hover-class="hover-bg" hover-start-time="100" hover-stay-time="100">
		<view v-if="icon" class="cell-left-icon">
			<image v-if="iconImg" :src="iconImg" mode="aspectFit" />
			<text v-if="iconFont" :class="iconFont" />
		</view>
		<view class="flex-3">
			<view class="cell-title"> {{title}} </view>
			<view class="cell-label"> {{label}} </view>
		</view>
		<view v-if="value" class="cell-value flex-2 right"> {{value}} </view>
		<view v-if="arrow" class="cell-right-arrow">
			<image :src="arrowR" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:'oCellItem',
		// #ifdef MP-WEIXIN
		options:{ virtualHost:true },
		// #endif
		
		inject:['oCell'],
		
		props: {
			title:{
				type:String,
				default:'Title'
			},
			value:{
				type:String,
				default:''
			},
			label:{
				type:String,
				default:''
			},
			url:{
				type:String,
				default:''
			},
			arrow:{
				type:[String,Boolean],
				default:''
			},
			icon:{
				type:String,
				default:''
			},
		},
		
		data() {
			return {
				arrowR:require('@/uni_modules/o-cell/static/arrow_r.svg'),
				iconFont:'',
				iconImg:'',
			}
		},
		
		created() {
			this.border = this.oCell.border
			this.size = this.oCell.size
			this.Icon();
		},
		
		methods:{
			onClick(e){this.$emit('click',{})},
			Icon(){
				if(this.icon.includes('.png')||this.icon.includes('.svg')){
					this.iconImg = this.icon
				} else if(this.icon){
					this.iconFont = this.icon
				} else {
					return
				}
			}
		},
		
		computed: {
			Border(){return this.border},
			Size(){return this.size==='lg'?this.size:''},
		},
	}
</script>

<style lang="scss">
	.o-cell-item{
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 32rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		overflow: hidden;
		background-color:#fff;
		&+.o-cell-item.bb-so{
			&::before{
				position:absolute;
				top:0;left:32rpx;right:0;
				height:1rpx;content:'';
				background-color:#f4f5f7;
			}
		}
		.cell-title{
			width: 100%;
			color: #323334;
			overflow:hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			line-clamp: 1;
			-webkit-line-clamp: 1;
		}
		.cell-label{
			color:#979899;
			font-size: 24rpx;
			line-height: 36rpx;
			padding-top: 8rpx;
			overflow:hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
		}
		.cell-value{ color:#979899; }
		.cell-right-arrow,.cell-left-icon{
			width: 32rpx;
			height:48rpx;
			text,image{
				width: 32rpx;
				height:48rpx;
				display: block;
				font-size: 32rpx;
				line-height: 48rpx;
				vertical-align: bottom;
			}
		}
		.cell-left-icon{margin-right:8rpx}
		.cell-right-arrow{padding-left:4rpx;}
		&.lg{
			padding: 24rpx 32rpx;
			.cell-title,.cell-value{
				font-size: 32rpx;
			}
			.cell-label{
				font-size: 28rpx !important;
			}
			.cell-right-arrow,.cell-left-icon{
				width: 36rpx;
				height:48rpx;
				text,image{
					font-size: 36rpx;
					width:100%!important;
					height:100%!important;
					display: block;
				}
			}
			.cell-right-arrow{padding-left: 5rpx;}
		}
	}
	.flex-2{flex:2}
	.flex-3{flex:3}
	.hover-bg{background-color:#f4f5f7!important}
	.right{text-align:right!important;}
</style>
